<template>
	<view class="collageRedPackage">
		<view class="navigation">
			<image src="/static/images/collage/collage-back.png" class="collage-back" @click="back()" mode=""></image>
			<view class="navigation-title">我的开团红包</view>
		</view>
		<view class="collage-red-package-card" v-if="user">
			<view class="red-package-card-part1">
				<view>
					<view>今日红包(个)</view>
					<view>{{ user.group_bonuses_count }}</view>
				</view>
				<view>
					<view>今日金额(元)</view>
					<view>{{ user.group_bonuses_money }}</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="red-package-card-part2">
				<view>总红包个数(个):{{ user.group_bonuses_count_total }}</view>
				<view>总红包金额(元):{{ user.group_bonuses_money_total }}</view>
			</view>
		</view>
		<view class="red-package-list-box">
			<view class="red-package-list-title">
				<view class="red-package-list-title-left">今日红包</view>
				<view class="red-package-list-title-right" @click="buyVip()">
					<image src="/static/images/collage/collage-open-vip.png" mode=""></image>
				</view>
			</view>
			<view style="height: 88rpx;overflow: hidden;margin-top: 40rpx;">
				<scroll-view style="height:120rpx;width: 100%;overflow: hidden;white-space: nowrap;" scroll-x="true">
					<view class="scroll-view-h">
						<view class="date-item" :class="[0==tabIndex?'tabActive':'']" >
							<block >
								<view>今天</view>
								<view>待领取</view>
							</block>
							<!-- <block v-else-if="index==1">
								<view>明天</view>
								<view>待领取</view>
							</block>
							<block v-else-if="index==2">
								<view>后天</view>
								<view>待领取</view>
							</block>
							<block v-else>
								<view>{{ item }}</view>
								<view>待领取</view>
							</block> -->
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="red-package-list">
				<view class="red-package-list-item-box" v-for="(item,index) in pageItems" :key="index" >
					<block  v-if="item.taken_at==''&&isToday">
						<view class="red-package-list-item " :class="[item.is_shake?'cake':'']" @click="takeBonuses(index,item.id)" >
							<image src="/static/images/collage/waiting-collection.png" class="waiting-collection" mode=""></image>
							<view class="expire-time">{{ item.group_expired_at.slice(5,10) }}到期</view>
						</view>
						<view class="open-detail" v-if="item.children_id==0">
							<view>查看详情</view>
						</view>
						<view class="open-detail" v-else>
							<image :src="item.avatar_url" mode=""></image>
							<view>伙伴贡献</view>
						</view>
					</block>
					<block v-if="item.taken_at!=''&&isToday">
						<view class="red-package-list-item " :class="[item.is_shake?'cake':'']" >
							<image src="/static/images/collage/received.png" class="received" mode=""></image>
							<view class="expire-time">{{ item.group_expired_at.slice(5,10) }}到期</view>
							<view class="red-money-num">{{ item.take_money }}</view>
						</view>
						<view class="open-detail" v-if="item.children_id==0">
							<view>查看详情</view>
						</view>
						<view class="open-detail" v-else>
							<image :src="item.avatar_url" mode=""></image>
							<view>伙伴贡献</view>
						</view>
					</block>
					<block v-if="item.taken_at==''&&!isToday">
						<view class="red-package-list-item " :class="[item.is_shake?'cake':'']" >
							<image src="/static/images/collage/waiting-collection.png" class="waiting-collection" mode=""></image>
							<view class="expire-time">{{ item.group_expired_at.slice(5,10) }}到期</view>
						</view>
						<view class="open-detail" v-if="item.children_id==0">
							<view>查看详情</view>
						</view>
						<view class="open-detail" v-else>
							<image :src="item.avatar_url" mode=""></image>
							<view>伙伴贡献</view>
						</view>
					</block>
				</view>
				<!-- v-if="pageItems&&pageItems.length<9" -->
				<block v-for="(item,index) in difNum" :key="index" >
					<view class="red-package-list-item-box" >
						<view class="red-package-list-item">
							<image src="/static/images/collage/unopenbg.png" class="unopenbg" mode=""></image>
						</view>
						<view class="open-detail">
							<image src="/static/images/collage/unopen.png" class="unopen" mode=""></image>
							<view class="unopen-text">开团即得</view>
						</view>
					</view>
				</block>
				
			</view>
		</view>
		<image src="/static/images/collage/receiveall.png" class="receiveall" mode="" @click="batchTakeBonuses()" v-if="isToday"></image>
	</view>
</template>

<script>
	import store from "store"
	import { mapGetters,mapActions } from 'vuex'
	import CurrentUser from "mixins/CurrentUser"
	import { getGroupsBonusesList,takeBonuses,batchTakeBonuses } from 'api/collageApi'
	import Pagination from "mixins/Pagination"
	export default {
		store,
		mixins: [
			CurrentUser,
			Pagination
		],
		computed: {
			...mapGetters([
				'user'
				]),
				difNum(){
					if(this.pageItems.length<9){
						return 9 - this.pageItems.length
					}else{
						return 0
					}
				}
		},
		data(){
			return {
				defaultPackageList:[1,2,3,4,5,6,7,8,9],
				tabIndex:0,
				bonusesList:[],
				dateList:[],
				time:'',
				year:'',
				isToday:true
			}
		},
		methods:{
			back(){
				uni.navigateBack({})
			},
			dateTab(index,dateValue){
				this.tabIndex = index
				if(index!=0){
					this.isToday = false
				}else{
					this.isToday = true
				}
				this.time = this.year + '-' +  dateValue
				this.pageNumber = 1
				this.pageItems = []
				this.pageHasNoMore = false
				this.loadPageData()
			},
			buyVip(){
				uni.navigateTo({
					url:'/packs/pages/user/buyvip'
				})
			},
			async loadPageItems() {
				let respond = await getGroupsBonusesList(this.time,{page: this.pageNumber})
				respond.data.forEach((ele,index)=>{
						ele.is_shake = false
				})
				return respond
			},
			getGroupsBonusesList(time){
				getGroupsBonusesList(time).then(res=>{
					let list = res.data;
					list.forEach((ele,index)=>{
						ele.is_shake = false
					})
					this.bonusesList = list
				})
			},
			takeBonuses(index,bonusesId){
				this.pageItems[index].is_shake = true
				takeBonuses(bonusesId).then(res=>{
					setTimeout(()=>{
						this.pageItems[index].is_shake = false
						this.pageItems[index].taken_at = res.taken_at
						this.pageItems[index].take_money = res.take_money
					},3000)
				})
			},
			batchTakeBonuses(){
				this.pageItems.forEach((ele,index)=>{
					this.pageItems[index].is_shake = true
				})
				batchTakeBonuses().then(res=>{
					setTimeout(()=>{
						this.pageItems.forEach((ele,index)=>{
							this.pageItems[index].is_shake = false
							this.time = this.year + '-' + this.dateList[0]
							this.pageNumber = 1
							this.pageItems = []
							this.pageHasNoMore = false
							this.loadPageData()
						})
					},3000)
				})
				setTimeout(()=>{
					this.pageItems.forEach((ele,index)=>{
						this.pageItems[index].is_shake = false
					})
				},4000)
			}
		},
		async onLoad() {
			var dateList = [];
	　　	let startDate = new Date();
			let endDate = new Date();
			this.year = startDate.getFullYear();
			endDate.setDate(startDate.getDate() + 30);
			while((endDate.getTime() - startDate.getTime()) >= 0) {
					let month = (startDate.getMonth() + 1).toString().length === 1 ? "0" + (startDate.getMonth() + 1).toString() : (startDate.getMonth() + 1);
					let day = startDate.getDate().toString().length === 1 ? "0" + startDate.getDate() : startDate.getDate();
					dateList.push(month + "-" + day);
					startDate.setDate(startDate.getDate() + 1);
			}
			this.dateList = dateList; 
			this.time = this.year + '-' + this.dateList[0]
			await this.loadPageData()
			
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #FEF5E9;
	}
	.collageRedPackage{
		padding-top: 118rpx;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #FEF5E9;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top:26rpx;
		left: 32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.collage-red-package-card{
		width: 686rpx;
		height: 300rpx;
		margin: 0 auto;
		background: url(../../../static/images/collage/red-card-bg.png) no-repeat center;
		background-size:cover;
	}
	.red-package-card-part1{
		display: flex;
		justify-content: space-around;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 48rpx;
			>view:nth-child(1){
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				opacity: 0.4;
			}
			>view:nth-child(2){
				font-size: 64rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 74rpx;
				margin-top:8rpx;
			}
		}
	}
	.line{
		width: 590rpx;
		height: 2rpx;
		background: #FFFFFF;
		opacity: 0.1;
		margin:32rpx auto 0;
	}
	.red-package-card-part2{
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;
		>view{
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}
	.red-package-list{
		
	}
	.red-package-list-box{
		width: 686rpx;
		padding-bottom: 150rpx;
		margin:24rpx auto;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		padding-top: 24rpx;
	}
	.red-package-list-title{
		display: flex;
		justify-content: space-between;
		
	}
	.red-package-list-title-left{
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		margin: 18rpx 0 0 32rpx;
	}
	.red-package-list-title-right{
		width: 492rpx;
		height: 68rpx;		
		image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.scroll-view-h{
		margin-left: 58rpx;
		
	}
	.date-item{
		display: inline-block;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		width: 92rpx;
		height: 88rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
		margin-right:34rpx;
	}
	.tabActive{
		background: #FF476B;
		font-weight: 400;
		color: #FFFFFF;
	}
	.red-package-list{
		display: flex;
		flex-wrap: wrap;
		margin:48rpx 0 0 32rpx;
		
	}
	.red-package-list-item-box{
		width: 160rpx;
		margin:0 24rpx 40rpx 24rpx;
	}
	.red-package-list-item{
		width: 160rpx;
		height: 184rpx;
		position: relative;
		.waiting-collection,.received,.unopenbg{
			display: block;
			width: 160rpx;
			height: 184rpx;
			position: absolute;
			left:0;
			top:0;
			z-index: 0;
		}
	}
	.red-money-num{
		font-size: 40rpx;
		font-weight: 600;
		color: #FE591D;
		line-height: 56rpx;
		width: 100%;
		text-align: center;
		position: absolute;
		left:0;
		top:28rpx;
	}
	.expire-time{
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #FEF3D7;
		line-height: 34rpx;
		position: absolute;
		bottom: 8rpx;
		left:0rpx;
		z-index: 1;
	}
	.open-detail{
		font-size: 28rpx;
		font-weight: 400;
		color: #FE8161;
		line-height: 40rpx;
		text-align: center;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		>image{
			display: block;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 4rpx;
		}
		.unopen{
			border-radius:0;
		}
		.unopen-text{
			color: #333333;
		}
	}
	.receiveall{
		display: block;
		width: 622rpx;
		height: 100rpx;
		position: fixed;
		bottom: 64rpx;
		left:64rpx;
	}
	
	.cake{
		animation:move 2s 0s infinite;
		-webkit-animation:move 2s 0s infinite;
		transform-origin:bottom;
		-webkit-transform-origin:bottom;
	}
	
	@keyframes move
	{
		0%, 65%{ 
		  -webkit-transform:rotate(0deg);
		  transform:rotate(0deg);
		}
		70% {  
		  -webkit-transform:rotate(8deg);
		  transform:rotate(8deg);
		}
		75% {  
		  -webkit-transform:rotate(-8deg);
		  transform:rotate(-8deg);
		}
		80% {  
		  -webkit-transform:rotate(8deg);
		  transform:rotate(8deg);
		}
		85% {  
		  -webkit-transform:rotate(-8deg);
		  transform:rotate(-8deg);
		}
		90% {  
		  -webkit-transform:rotate(8deg);
		  transform:rotate(8deg);
		}
		95% {  
		  -webkit-transform:rotate(-8deg);
		  transform:rotate(-8deg);
		}
		100% {  
		  -webkit-transform:rotate(0deg);
		  transform:rotate(0deg);
		}
	}
	
</style>
